<template>
  <div class="flex items-center">
    <img :src="code_path" alt="" @click="handleClick(code_path)" style="width: 30px; height: 30px" class="" />
    <button
      href=""
      @click="downloadByBlob(code_path,encode)"
      style="color: #6a4bff; font-size: 14px"
      class="ml-3"
      >下载</button
    >
  </div>
</template>
<script setup>
  import { h, reactive, ref } from 'vue';
  import { preview } from 'v-preview-image';
import { string } from 'vue-types';

  const props = defineProps({
    row: Object,
  });
   const code_path = ref(props.row.code_path);
    const encode = ref(props.row.encode);
  //图片编码

  var download = function (href, name) {
    let eleLink = document.createElement('a');
    eleLink.download = name;
    eleLink.href = href;
    eleLink.click();
    eleLink.remove();
  };
  var downloadByBlob = function (url, name, type) {
      let image = new Image();
      image.setAttribute('crossorigin', 'anonymous');
      image.src = url;
      image.onload = () => {
        let canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob);
          download(url, name);
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
  };

  const handleClick = (code_path) => {
    preview(code_path);
  };
</script>
 